<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>admin</title>

    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/static/css/admin/bootstrap.min14ed.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/admin/font-awesome.min93e3.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/admin/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/admin/plugins/summernote/new_sumnote.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/plugins/summernote/summernote-bs3.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/plugins/chosen/chosen.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/plugins/datapicker/datepicker3.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/style.min862f.css"/>
    <link href="/static/css/admin/admincommon.css?v=20181116" rel='stylesheet' type='text/css' />
    <link href="/static/css/layui/css/layui.css" rel='stylesheet' type='text/css' />
</head>
<style type="text/css">
    .chosen-container-multi{margin-left:16px;}
</style>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <form id="article_form" method="post" class="form-horizontal">
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-sm-1 control-label">排序</label>
                        <div class="col-sm-6">
                            <input type="text" name="sort"  value="{$data['sort']}" class="form-control">(越小越靠前)
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-1 control-label">图片</label>
                        <div class="col-sm-2">
                            <input type="file" id="article_poster" name="file"  value="" class="form-control input-file" onchange="getImgData(this);">
                            <input type="hidden" id="photo" name="img"  value="{$data['img']}" class="form-control input-file">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-1 control-label">预览图片</label>
                        <div class="" id="temp_picture_wrap" style="position:relative;">
                           <if condition="$data['logo']">
                                <img src="{$domain}{$data['img']}" id="temp_picture" width="240" height="250" style="margin-top:15px;" />

                                <a class='del_temp_picture' style='position:absolute;bottom:0px;margin-left:10px;'>删除</a>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-1 control-label">状态</label>
                        <div class="col-sm-6">
                            <input type="radio" id="radio-3" value="0" name="status" <?php if($data['status'] == 0){ echo 'checked';} ?>>
                            <label for="radio-1">开启</label>
                            &nbsp&nbsp&nbsp&nbsp&nbsp
                            <input type="radio" id="radio-4" value="1" name="status" <?php if($data['status'] == 1){ echo 'checked';} ?>>
                            <label for="radio-2">禁用</label>
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin-left: 140px"  class="row">
                    <button class="btn btn-primary" type="submit">保存内容</button>
                </div>
            </div>
        </form>
    </div>
    <js href="/static/js/admin/jquery.min.js"/>
    <js href="/static/js/admin/bootstrap.min.js"/>
    <js href="/static/js/admin/content.min.js"/>
    <js href="/static/js/admin/plugins/chosen/chosen.jquery.js"/>
    <js href="/static/js/admin/plugins/summernote/new_sumnote.js"/>
    <js href="/static/js/admin/plugins/summernote/summernote-zh-CN.js"/>
    <js href="/static/js/admin/plugins/layui/layer/layer.js"/>
    <js href="/static/js/admin/plugins/datapicker/bootstrap-datepicker.js"/>
    <js href="/static/css/layui/layui.js"/>
    <script>
        layui.use('colorpicker', function(){
            var $ = layui.$
                ,colorpicker = layui.colorpicker;
            //表单赋值
            colorpicker.render({
                elem: '#test-form'
                ,color: '#1c97f5'
                ,done: function(color){
                    $('#test-form-input').val(color);
                }
            });
        });
        $(document).ready(function(){

            $("#temp_picture_wrap").on("click",'.del_temp_picture',function(){
                $("#article_poster").val('');
                $("#hide_article_poster").val('');
                $("#temp_picture_wrap").empty();
            });

            $('.summernote').summernote({
                lang:"zh-CN",
                height:'300px',
                callbacks: {
                    onImageUpload: function(files) {
                        var formData = new FormData();
                        formData.append('file',files[0]);
                        $.ajax({
                            url : "{:url('admin/Upload/uploadToQiNiu')}?isupload=2&folder=article",//后台文件上传接口
                            type : 'post',
                            data : formData,
                            processData : false,
                            contentType : false,
                            success : function(data) {
                                if(data.code==1){

                                    $('.summernote').summernote('insertImage',data.data,'img');

                                }else{

                                    layer.msg(data.msg, {time:800, icon:2}); 
                                }
                            },
                            dataType:'json'
                        });
                    }
                }
            });
            
            $("#article_add_time").datepicker();

            var chosen = $(".chosen-select").chosen({
                max_selected_options:10,
                width: "50%"
            });
            chosen.bind("chosen:maxselected", function () { 
                layer.msg('最多选10项', {time:800, icon:2});
            });
        });

        function getImgData(obj){

            var file =  obj.files[0];
            var formData = new FormData();

            var createObjectURL = function(blob){

                return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
            };

            formData.append('file',file);

            $.ajax({
                url: "{:url('admin/Upload/uploadToQiNiu')}?isupload=2&folder=product",
                type: 'post',
                processData: false,  // 异步传输 formData 时要加上  processData: false  contentType: false 
                contentType: false,  // 否则会报 Illegal invocation 非法调用错误
                data: formData,
                success: function (data) {
                    
                    if(data.code==1) {
                        var filedata  = createObjectURL(file);
                        var imgObject = new Image();
                        imgObject.src = filedata;
                        imgObject.id  = 'temp_picture';
                        imgObject.width   = '240';
                        imgObject.height  = '250';
                        imgObject.style.marginTop  = '15px';

                        $('#temp_picture_wrap').html('').append(imgObject);
                        $('#temp_picture_wrap').append("<a class='del_temp_picture' style='position:absolute;bottom:0px;margin-left:10px;'>删除</a>"); 
                        $('#photo').val(data.data);
                    }else{
                        
                        $("#article_poster").val('');
                        $("#temp_picture_wrap").empty();
                        layer.msg(data.msg, {time:800, icon:2}); 
                    }
                   
                },
                dataType:'json'
            });
           
        }

    </script>
</html>
